<template>
  <el-form
    :model="mainForm"
    :rules="mainRules"
    ref="mainForm"
    label-width="160px"
  >
    <el-row :gutter="20" v-if="mainForm.userCate">
      <el-col :span="24">
        <el-form-item label="服务商类型:" prop="userCate">
          <el-select
            size="small"
            v-model="mainForm.userCate"
            :disabled="parentService == '0'?false:true"
            placeholder="请选择服务商类型"
          >
            <el-option
              v-for="item in userCateOptions"
              :key="item.dictKey"
              :label="item.dictValue"
              :value="item.dictKey"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="20" v-if="serviceType != '0'">
      <el-col :span="24">
        <el-form-item label="营业执照照片:" prop="roaLicenseImage">
          <el-upload
            action=""
            list-type="picture-card"
            :http-request="httpRoaLicenseRequest"
            :limit="1"
            :file-list="roaLicenseFileList"
            :on-remove="roaLicenseRemove"
            :before-remove="beforeroaLicenseRemove"
            :before-upload="beforeUpload"
            :on-preview="imgPreview"
          >
            <i slot="default" class="el-icon-plus"></i>
          </el-upload>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="营业执照名称:" prop="compName">
          <el-input
            size="small"
            v-model="mainForm.compName"
            placeholder="请输入营业执照名称"
          ></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="营业执照编号:" prop="roaLicenseNo">
          <el-input
            size="small"
            v-model="mainForm.roaLicenseNo"
            placeholder="请输入营业执照编号"
          ></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="营业执照开始日期:" prop="roaLicenseStartTime">
          <el-date-picker
            size="small"
            type="date"
            placeholder="选择日期"
            v-model="mainForm.roaLicenseStartTime"
            format="yyyy 年 MM 月 dd 日"
            value-format="yyyy-MM-dd HH:mm:ss"
            style="width: 100%"
          ></el-date-picker>
        </el-form-item>
      </el-col>
      <!-- <el-col :span="12">
        <el-form-item label="营业执照有效期:" prop="roaLicenseTime">
          <el-date-picker
            size="small"
            type="date"
            placeholder="选择日期"
            v-model="mainForm.roaLicenseTime"
            format="yyyy 年 MM 月 dd 日"
            value-format="yyyy-MM-dd HH:mm:ss"
            style="width: 100%"
          ></el-date-picker>
        </el-form-item>
      </el-col> -->
       <el-col :span="12">
        <el-form-item label="营业执照截止日期:" prop="roaLicenseTime">
          <el-date-picker
            size="small"
            type="date"
            placeholder="选择日期"
            v-model="mainForm.roaLicenseTime"
            format="yyyy 年 MM 月 dd 日"
            value-format="yyyy-MM-dd HH:mm:ss"
            style="width: 100%"
          ></el-date-picker>
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="营业执照注册地址:" prop="businessAddress">
          <el-input
            size="small"
            v-model="mainForm.businessAddress"
            placeholder="请输入营业执照注册地址"
            clearable
          ></el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="24">
        <el-form-item label="法人手持身份证:" prop="roaCardHeld" v-if="serviceType == '0'">
          <el-upload
            action=""
            list-type="picture-card"
            :http-request="httpRoaCardHeldRequest"
            :limit="1"
            :file-list="roaCardHeldFileList"
            :on-remove="roaCardHeldRemove"
            :before-remove="beforeroaCardHeldRemove"
            :before-upload="beforeUpload"
            :on-preview="imgPreview"
          >
            <i slot="default" class="el-icon-plus"></i>
          </el-upload>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="法人身份证人像面:" prop="roaCardPositive">
          <el-upload
            action=""
            list-type="picture-card"
            :http-request="httpCardPositiveRequest"
            :limit="1"
            :file-list="roaPositiveFileList"
            :on-remove="roaPositiveRemove"
            :before-remove="beforeroaPositiveRemove"
            :before-upload="beforeUpload"
            :on-preview="imgPreview"
          >
            <i slot="default" class="el-icon-plus"></i>
          </el-upload>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="法人身份证国徽面:" prop="roaCardBack">
          <el-upload
            action=""
            list-type="picture-card"
            :http-request="httpCardBackRequest"
            :limit="1"
            :file-list="roaCardBackFileList"
            :on-remove="roaCardBackRemove"
            :before-remove="beforeroaCardBackRemove"
            :before-upload="beforeUpload"
            :on-preview="imgPreview"
          >
            <i slot="default" class="el-icon-plus"></i>
          </el-upload>
        </el-form-item>
      </el-col>
      
      <el-col :span="12">
        <el-form-item label="法人名称:" prop="roaName">
          <el-input
            size="small"
            v-model="mainForm.roaName"
            placeholder="请输入法人名称"
          ></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="身份证号:" prop="roaCardNo">
          <el-input
            size="small"
            maxlength="18"
            v-model="mainForm.roaCardNo"
            placeholder="请输入身份证号"
          ></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="法人身份证开始日期:" prop="roaCardStartTime">
          <el-date-picker
            size="small"
            type="date"
            placeholder="选择日期"
            v-model="mainForm.roaCardStartTime"
            format="yyyy 年 MM 月 dd 日"
            value-format="yyyy-MM-dd HH:mm:ss"
            style="width: 100%"
            @change="roaCardStartTimeChange"
          ></el-date-picker>
        </el-form-item>
      </el-col>
      <!-- <el-col :span="12">
        <el-form-item label="法人身份证有效期:" prop="roaCardTime">
          <el-date-picker
            size="small"
            type="date"
            placeholder="选择日期"
            v-model="mainForm.roaCardTime"
            format="yyyy 年 MM 月 dd 日"
            value-format="yyyy-MM-dd HH:mm:ss"
            style="width: 100%"
          ></el-date-picker>
        </el-form-item>
      </el-col> -->
      <el-col :span="12">
        <el-form-item label="法人身份证截止日期:" prop="roaCardTime">
          <el-date-picker
            size="small"
            type="date"
            placeholder="选择日期"
            v-model="mainForm.roaCardTime"
            format="yyyy 年 MM 月 dd 日"
            value-format="yyyy-MM-dd HH:mm:ss"
            style="width: 100%"
          ></el-date-picker>
          <el-checkbox v-model="roaCardTimeChecked" @change="handleCheckedCitiesChange">长期</el-checkbox>
        </el-form-item>
      </el-col>
    </el-row>
    <el-image-viewer
        style="z-index: 99999;"
        v-if="imgShow"
        :on-close="()=>{ imgShow = false }"
        :url-list="imgUrlList"
      ></el-image-viewer>
  </el-form>
</template>

<script>
import { uploadServiceOCRCard,uploadPrivateUrl } from "@/api/system/oss";
import { getDictionary } from "@/api/system/dict";
import canvasImg from '@/util/canvasImg';

export default {
  mixins: [canvasImg],
  props: {
    mainForm: Object,
    serviceType: {
      type: [Number, String],
      default: null
    },
    parentService: {
      type: [Number, String],
      default: null
    },
  },
  data() {
    return {
      imgShow:false,
      imgUrlList:[],
      mainRules: {
        userCate: [
          { required: true, message: "请输入服务商类型", trigger: "blur" },
        ],
        compName: [
          { required: true, message: "请输入公司名称", trigger: "blur" },
        ],
        roaName: [
          { required: true, message: "请输入法人名称", trigger: "blur" },
          // { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        roaCardNo: [
          { required: true, message: "请输入身份证号", trigger: "blur" },
          { required: true ,pattern: /(^\d{18}$)|(^\d{17}(\d|X|x)$)/, message: '身份证号格式不对', trigger: 'blur' }
        ],
        roaLicenseNo: [
          { required: true, message: "请输入营业执照编号", trigger: "blur" },
        ],
        // roaLicenseTime: [
        //   { required: true, message: "请选择营业执照有效期", trigger: "blur" },
        // ],
        roaLicenseStartTime: [
          { required: true, message: "请选择营业执照开始时间", trigger: "blur" }
        ],
        roaLicenseTime: [
          { required: true, message: "请选择营业执照截止日期", trigger: "blur" }
        ],
        businessAddress: [
          { required: true, message: "请选择营业执照注册地址", trigger: "blur" }
        ],
        // roaCardTime: [
        //   {
        //     required: true,
        //     message: "请选择法人身份证有效期",
        //     trigger: "blur",
        //   },
        // ],
        roaCardStartTime: [
          {
            required: true,
            message: "请选择法人身份证开始日期",
            trigger: "blur"
          }
        ],
        roaCardTime: [
          {
            required: true,
            message: "请选择法人身份证截止日期",
            trigger: "blur"
          }
        ],
        roaLicenseImage: [
          { required: true, message: "请上传营业执照照片", trigger: "blur" },
        ],
        roaCardPositive: [
          {
            required: true,
            message: "请上传法人身份证人像面",
            trigger: "blur",
          },
        ],
        roaCardBack: [
          {
            required: true,
            message: "请上传法人身份证国徽面",
            trigger: "blur",
          },
        ],
      },
      roaLicenseFileList: [],
      roaPositiveFileList: [],
      roaCardBackFileList: [],
      userCateOptions: [],
      roaCardTimeChecked:false,
      roaCardHeldFileList:[],//法人手持身份证

    };
  },
  created() {
    if (this.mainForm.userCate) {
      this.getDictData();
    }
  },
  methods: {
    // 法人身份证开始日期
    roaCardStartTimeChange(){
      this.$forceUpdate()
    },
    // 法人身份证背面--长期
    handleCheckedCitiesChange(value){
      this.roaCardTimeChecked=value;
      if(value){
        this.mainForm.roaCardTime = "2999-12-31 00:00:00";
        this.$forceUpdate();
      }else{
        this.mainForm.roaCardTime = "";
      }
      this.$refs.mainForm.validateField("roaCardTime");
    },
    /* 预览图片 */
    imgPreview(file) {
      this.imgUrlList[0] = file.url;
      this.imgShow = true;
    },
    /* 字典调用 */
    getDictData() {
      getDictionary({code: "user_cate"}).then(res => {
        this.userCateOptions = res.data.data;
      });
    },
    // beforeUpload(file) {
    //   this.compressPictures(file);
    // },
    /* 营业执照照片 上传 */
    httpRoaLicenseRequest(option) {
      uploadServiceOCRCard(option.file, "5").then((res) => {
        this.mainForm.roaLicenseImage = res.data.data.link;
        this.mainForm.compName = res.data.data.companyName;
        this.mainForm.roaLicenseNo = res.data.data.creditCode;
        this.mainForm.roaLicenseTime = res.data.data.validToDate;
        this.mainForm.roaLicenseStartTime = res.data.data.validFromDate;
        this.mainForm.businessAddress = res.data.data.businessAddress;
        this.$refs.mainForm.validateField("roaLicenseImage");
        this.$refs.mainForm.validateField("businessAddress");
      });
    },
    /* 法人身份证人像面 上传 */
    httpCardPositiveRequest(option) {
      uploadServiceOCRCard(option.file, "1").then((res) => {
        this.mainForm.roaCardPositive = res.data.data.link;
        this.mainForm.roaName = res.data.data.name;
        this.mainForm.roaCardNo = res.data.data.num;
        this.$refs.mainForm.validateField("roaCardPositive");
      });
    },
    /* 法人身份证国徽面 上传 */
    httpCardBackRequest(option) {
      uploadServiceOCRCard(option.file, "2").then((res) => {
        this.mainForm.roaCardBack = res.data.data.link;
        // this.mainForm.roaCardTime = res.data.data.endDate;
        
        if(res.data.data.endDate == ''|| res.data.data.endDate =='2999-12-31 00:00:00'){
          this.roaCardTimeChecked = true;
          this.handleCheckedCitiesChange(true)
        }else{
          this.roaCardTimeChecked = false;
          this.mainForm.roaCardTime = res.data.data.endDate;
        }
        this.mainForm.roaCardStartTime = res.data.data.startDate;
        this.$refs.mainForm.validateField("roaCardBack");
      });
    },
    /* 营业执照照片 删除 */
    roaLicenseRemove(file, fileList) {
      this.roaLicenseFileList = fileList;
      this.mainForm.roaLicenseImage = "";
    },
    beforeroaLicenseRemove() {
      return this.$confirm(`确定移除营业执照照片？`);
    },
    /* 法人身份证人像面 删除 */
    roaPositiveRemove(file, fileList) {
      this.roaPositiveFileList = fileList;
      this.mainForm.roaCardPositive = "";
    },
    beforeroaPositiveRemove() {
      return this.$confirm(`确定移除法人身份证人像面照片？`);
    },
    /* 法人身份证国徽面 删除 */
    roaCardBackRemove(file, fileList) {
      this.roaCardBackFileList = fileList;
      this.mainForm.roaCardBack = "";
    },
    beforeroaCardBackRemove() {
      return this.$confirm(`确定移除法人身份证国徽面照片？`);
    },
    /* 法人手持身份证 上传 */
    httpRoaCardHeldRequest(option) {
      this.mainForm.roaCardHeld = "";
      uploadPrivateUrl(option.file, option.file.name).then((res) => {
        this.mainForm.roaCardHeld = res.data.data.attachId;
        this.$refs.mainForm.validateField("roaCardHeld");
      });
    },
    /* 法人手持身份证 删除 */
   roaCardHeldRemove(file, fileList) {
      this.roaCardHeldFileList = fileList;
      this.mainForm.roaCardHeld = "";
    },
    beforeroaCardHeldRemove() {
      return this.$confirm(`确定移除法人手持身份证照片？`);
    }
  },
};
</script>

<style>
</style>